
import React, { Component} from 'react';
import { connect } from 'react-redux';

import moment from 'moment'

import {withRouter} from 'react-router-dom';
import InputComponent from '@components/inputComponent'
import SelectComponent from '@components/selectComponent'
import DataPickerComponent from '@components/dataPickerComponent'
import User from '@pages/system/user'

import Loadable from 'react-loadable';
import { Button, Form, DatePicker} from 'antd'

const { MonthPicker, RangePicker } = DatePicker
const Role = Loadable({
	loader: () => import('@pages/system/role'),
	loading: ()=> '33333333',
	delay: 3000
})


class TableDemo extends Component {
    constructor(props) {
        super(props);
		this.refInput     	= null
		this.refSelect     	= null
		this.refDataPicker 	= null
		this.refMonthPicker = null
		this.refYearPicker  = null
        this.state = {
			isShow: false,
          list: this.props.routerData,
		  inputComponentState: {},
		  inputConfig: {
			  field: 'input',
			  defaultValue: 9988,
			  width: '200px',
			  allowClear: true
		  },
		  
		  selectComponentState: {},
		  selectConfig: {
			  field: 'select',
			  defaultValue: '1',
			  width: '200px',
			  allowClear: true,
			  options: [
				  { label: 'jack', value:'1' },
				  { label: 'tom', value:'2' },
				  { label: 'luck', value:'3' }
			  ]
		  },
		  
		  dataPickerComponentState: {},
		  dataPickerConfig: {
			  field: 'picker',
			  defaultValue: [moment('2015-06', 'YYYY-MM-DD'),moment('2019-06', 'YYYY-MM-DD')],
			   width: '300px',
			  allowClear: true,
			  format: 'YYYY-MM-DD'
		  },
		  
		  monthPickerComponentState: {},
		  monthPickerConfig: {
			  field: 'picker1',
			//   defaultValue: [moment('2018-2','YYYY-MM'),moment('2019-2','YYYY-MM')],
			defaultValue: [],
				width: '300px',
			  allowClear: true,
			  mode: ['month', 'month'],
			  format: 'YYYY-MM'
		  },

		  yearPickerComponentState: {},
		  yearPickerConfig: {
			  field: 'picker1',
			  defaultValue: [moment('2018','YYYY'),moment('2019','YYYY')],
				width: '300px',
			  allowClear: true,
			  mode: ['year', 'year'],
			  format: 'YYYY'
		  },

          reward: [
              { username: 12},
              { username: 32}
          ]
        }
      
    }

    componentWillMount() {
        
    }

    componentDidMount() {
		this.onInputData()
    }
	
    method() {
 
    }
	onInputData() {
		const input = this.refInput.state
		const select = this.refSelect.state
		const dataPicker = this.refDataPicker.state
		const monthPicker = this.refMonthPicker.state
		this.setState({
			 inputComponentState      : input,
			selectComponentState     : select,
			dataPickerComponentState : dataPicker,
			monthPickerComponentState: monthPicker
		})
		console.log(this.state)
	}

	onChange=(val, valSting)=> {
		console.log(val,valSting)
	}
	onHandle() {
		console.log(12121)
		this.setState({
			isShow: !this.state.isShow
		})
	}

    render() {
        const listItems = this.state.list.map((item,index) => {
            return (
                <div key={index}>path: {item.path}</div>
            )
        })
		const formItemLayout = {
			labelCol: {
			  sm: { span: 6 },
			},
			wrapperCol: {
			  sm: { span: 16 },
			}
		}
		
        return (
            <div>
               
                TableDemo
 
                {listItems}
				
				<Form layout='horizontal' {...formItemLayout} style={{ width: '700px'}}>
					<Form.Item label="input组件">
						<InputComponent { ...this.state.inputConfig}  ref={ el => this.refInput=el }/>
					</Form.Item>
					<Form.Item label="select组件">
						<SelectComponent { ...this.state.selectConfig} ref={ el => this.refSelect=el }/>
					</Form.Item>
					<Form.Item label="dataPikcer组件">
						<DataPickerComponent { ...this.state.dataPickerConfig } ref={ el => this.refDataPicker=el }/>
					</Form.Item>
					<Form.Item label="monthPikcer组件">
						<DataPickerComponent { ...this.state.monthPickerConfig } ref={ el => this.refMonthPicker=el }/>
					</Form.Item>

					<Form.Item label="yearPikcer组件">
						<DataPickerComponent { ...this.state.yearPickerConfig } ref={ el => this.refYearPicker=el }/>
					</Form.Item>
					
					<Form.Item wrapperCol={{sm: {span: 16,offset: 6}}}>
						<MonthPicker onChange={this.onChange} placeholder="Select month" />
						<RangePicker onChange={this.onChange}/>
					</Form.Item>

					<Form.Item label="rolr组件">
						{
							this.state.isShow &&
							<Role/>
						}
						<Role/>
						
					</Form.Item>

					<Form.Item wrapperCol={{sm: {span: 16,offset: 6}}}>
						<Button type='primary' onClick={ this.onInputData.bind(this) }>获取表单数据</Button>
						
						<Button type='primary' onClick={ this.onHandle.bind(this) } style={{marginLeft: "20px"}}>是否显示role</Button>
					</Form.Item>



					<Form.Item label="数据">
					
						<span> {JSON.stringify({
							...this.state.inputComponentState, 
							...this.state.selectComponentState,
							...this.state.dataPickerComponentState
							})}</span>
					</Form.Item>
				</Form>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        routerData: state.base.routerData
    }
  }
 export default connect(mapStateToProps)(withRouter(TableDemo));
